<template>
  <el-form ref='form' :model='form' label-width="100px"  :inline='inline'>

    <!-- 实现数据 双向影响 表单内的元素 -->
    <el-form-item v-for='item in formLabel' :key='item.label' :label='item.label'>

      <!-- 循环 有什么表单就显示什么表单 -->
     <el-input v-if="item.type === 'input'"
         :placeholder="'请输入' + item.label"
         v-model="form[item.model]"
        ></el-input>
      <!-- form[item.model] 数据双向绑定 form[name] -->

      <el-switch v-if='item.type==="switch" '
                 v-model='form[item.model]'></el-switch>

      <el-date-picker v-if='item.type==="date"'
                       type='date'
                       value-format='yyyy-MM-dd'
                       placeholder="选择日期"
                       v-model="form[item.model]">
      </el-date-picker>

      <el-select v-if='item.type==="select"'
                  placeholder="请选择"
                  v-model='form[item.model]'>

        <!-- item循环里面再循环item.opts 渲染出有数量的<el-option>标签 -->
         <el-option v-for='item in item.opts'
                    :key='item.value'
                    :label="item.label"
                    :value='item.value'></el-option>
      </el-select>
    </el-form-item>

    <!-- 放一个插槽 可以随时加按钮 -->
    <el-form-item><slot></slot></el-form-item>
  </el-form>
</template>

<script>
export default {
  name:'CommonForm',

  // 外部数据传进来 props需要先定义数据类型
  props:{
    formLabel:Array, // 接收form组件的相关配置
    
    form:Object,// 接收form数据 从父组件传递过来的 进行双向绑定

    inline:Boolean,// inline控制的是布局
  }
    
}
</script>

<style>

</style>